//out: ../css/
@import "./base";
@vw: 3.75vw;
.header {
  z-index: 10;
  width: 100%;
  position: fixed;
  background-color: #fff;
  //头部
  .navbar {
    background-color: #fff;
    padding: 0 (18 / @vw) 0 (12 / @vw);
    height: (44 / @vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .iconfont {
      font-size: (28 / @vw);
      color: #fb7299;
    }
    .right {
      .iconfont {
        color: #000;
      }
      width: (166 / @vw);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .txt1 {
        width: (24 / @vw);
        height: (24 / @vw);
      }
      .txt2 {
        width: (72 / @vw);
        height: (24 / @vw);
      }
    }
  }
  //菜单
  .menu {
    background-color: #fff;
    width: 100%;
    height: (38 / @vw);
    display: flex;
    justify-content: space-between;
    ul {
      display: flex;
      width: (335 / @vw);
      height: (38 / @vw);
      li {
        width: (60 / @vw);
        height: (38 / @vw);
        display: flex;
        justify-content: center;
        &:first-child {
          a {
            border-bottom: 2px #fb7299 solid;
            height: (38 / @vw);
            width: (28 / @vw);
            color: #fb7299;
          }
        }
        a {
          display: flex;
          align-items: center;
          height: (38 / @vw);
          width: (28 / @vw);
        }
      }
    }
    .iconfont {
      width: (40 / @vw);
      height: (40 / @vw);
      color: #ccc;
      display: flex;
      font-size: (20 / @vw);
      justify-content: center;
      align-items: center;
    }
  }
}
.main {
  display: flex;
  flex-wrap: wrap;
  padding: (84 / @vw) (5 / @vw) 0 (5 / @vw);
  .video-item {
    width: (182 / @vw);
    height: (151 / @vw);
    .card {
      position: relative;
      width: (172 / @vw);
      height: (97 / @vw);
      img {
        width: (172 / @vw);
        height: (97 / @vw);
      }
      .count {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        width: (172 / @vw);
        height: (34 / @vw);
        padding: (8 / @vw);
        p {
          .iconfont {
            color: #fff;
          }
          span {
            color: #fff;
          }
        }
      }
      .title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}

.download {
  width: (345 / @vw);
  height: (45 / @vw);
  padding: 0 (15 / @vw);
  margin: 0 (15 / @vw);
  border-radius: (45 / @vw);
  background-color: #fb7299;
  position: fixed;
  bottom: 10vw;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .iconfont {
    color: #f2f3f5;
    padding: 1.5vw;
    border-radius: (32 / @vw);
  }
  p {
    color: #f2f3f5;
  }
}
